<template>
  <a-card :bordered="false" style="width: 70%; margin: 0 auto">
    <template #title>
      <div style="width: 100%; text-align: center">设置年度费用额度</div>
    </template>
    <div>
      <div
        class="label"
        style="color: #1890ff; font-size: 16px; margin: 0 0 20px"
      >
        <pay-circle-outlined style="margin-right: 10px" /> 校工会预算设置
      </div>
      <a-input-number
        style="width: 100%"
        v-model:value="formState.schoolUnion"
        addon-before="校工会"
        allowClear  
        :controls="false"
      />
      <div
        class="label"
        style="color: #1890ff; font-size: 16px; margin: 20px 0"
      >
        <pay-circle-outlined style="margin-right: 10px" /> 分工会预算设置
      </div>
      <a-radio-group v-model:value="unionType" size="large">
        <a-radio :value="1">按人数下拨</a-radio>
        <a-radio :value="0">固定额度</a-radio>
      </a-radio-group>
    </div>
    <br />
    <a-input-number
      v-model:value="formState.unionlimit"
      addon-before="分工会(按人数下拨)"
      v-if="unionType"
      allowClear
      :controls="false"
      style="margin-bottom: 10px; width: 100%"
    />
    <a-input-number
      v-model:value="formState.unionBottom"
      addon-before="最低额度"
      allowClear
      v-if="unionType"
      style="margin-bottom: 10px; width: 100%"
      :controls="false"
    />
    <a-input-number
      v-model:value="formState.unionTop"
      addon-before="最高额度"
      allowClear
      v-if="unionType"
      style="margin-bottom: 10px; width: 100%"
      :controls="false"
    />
    <div class="schoolUnionTable">
      <a-row :gutter="24">
        <a-col class="gutter-row" :span="8">
          <div class="gutter-box">分工会</div>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <div class="gutter-box">人数</div>
        </a-col>
        <a-col class="gutter-row" :span="8" v-if="unionType">
          <div class="gutter-box">预算</div>
        </a-col>
        <a-col class="gutter-row" :span="8" v-else>
          <div class="gutter-box">预算</div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-for="item in unionData" style="margin: 5px 0">
        <a-col class="gutter-row" :span="8">
          <div style="text-align: center">{{ item.name }}</div>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <div style="text-align: center">
            <a-tag color="blue">{{ item.userCounter }}</a-tag>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="8" v-if="unionType">
          <div style="text-align: center">
            <a-tag color="orange" v-if="formState.unionlimit">
              {{ unionLimit(formState.unionlimit! * item.userCounter) }}</a-tag
            >
          </div>
        </a-col>
        <a-col class="gutter-row" :span="8" v-else>
          <div style="width: 100%; display: flex; justify-content: center">
            <a-input-number
              v-model:value="item.limit"
              addon-before="额度"
              allowClear
              style="margin-bottom: 10px; width: 70%"
              :controls="false"
            />
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="label" style="color: #1890ff; font-size: 16px; margin: 20px 0">
      <pay-circle-outlined style="margin-right: 10px" /> 协会预算设置
    </div>
    <a-radio-group
      v-model:value="associationType"
      size="large"
      style="margin-bottom: 20px"
    >
      <a-radio :value="1">按人数下拨</a-radio>
      <a-radio :value="0">固定额度</a-radio>
    </a-radio-group>
    <a-input-number
      v-model:value="formState.associationlimit"
      addon-before="协会(每人费用)"
      v-if="associationType"
      allowClear
      style="margin-bottom: 10px; width: 100%"
      :controls="false"
    />
    <a-input-number
      v-model:value="formState.associationBottom"
      addon-before="最低额度"
      allowClear
      v-if="associationType"
      style="margin-bottom: 10px; width: 100%"
      :controls="false"
    />
    <a-input-number
      v-model:value="formState.associationTop"
      addon-before="最高额度"
      allowClear
      v-if="associationType"
      style="margin-bottom: 10px; width: 100%"
      :controls="false"
    />
    <div class="schoolUnionTable">
      <a-row :gutter="24">
        <a-col class="gutter-row" :span="8">
          <div class="gutter-box">协会</div>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <div class="gutter-box">人数</div>
        </a-col>
        <a-col class="gutter-row" :span="8" v-if="associationType">
          <div class="gutter-box">预算</div>
        </a-col>
        <a-col class="gutter-row" :span="8" v-else>
          <div class="gutter-box">预算</div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-for="item in associationData" style="margin: 5px 0">
        <a-col class="gutter-row" :span="8">
          <div style="text-align: center">{{ item.name }}</div>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <div style="text-align: center">
            <a-tag color="blue">{{ item.currentMembers }}</a-tag>
          </div>
        </a-col>
        <a-col class="gutter-row" :span="8" v-if="associationType">
          <div style="text-align: center">
            <a-tag color="orange" v-if="formState.associationlimit">
              {{
                associationLimit(
                  formState.associationlimit! * item.currentMembers
                )
              }}</a-tag
            >
          </div>
        </a-col>
        <a-col class="gutter-row" :span="8" v-else>
          <div style="width: 100%; display: flex; justify-content: center">
            <a-input-number
              v-model:value="item.limit"
              addon-before="额度"
              allowClear
              style="margin-bottom: 10px; width: 70%"
              :controls="false"
            />
          </div>
        </a-col>
      </a-row>
    </div>
    <a-button type="primary" style="width: 100%; margin-top: 20px" @click="save"
      >保存</a-button
    >
  </a-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getUnionList, getAssociationList } from "../../api";
import { PayCircleOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
onMounted(() => {
  getUnionList({ page: 1, size: 50 }).then((res: any) => {
    unionData.value = res.result.records.map((i: any) => {
      return {
        name: i.name,
        userCounter: i.userCounter,
        limit: null,
      };
    });
  });
  getAssociationList({ page: 1, size: 50 }).then((res: any) => {
    associationData.value = res.result.records.map((i: any) => {
      return {
        name: i.name,
        currentMembers: i.currentMembers,
        limit: null,
      };
    });
  });
});
const unionType = ref(1);
const associationType = ref(1);
const formState = ref({
  schoolUnion: undefined,
  unionlimit: undefined,
  unionTop: undefined,
  unionBottom: undefined,
  associationlimit: undefined,
  associationTop: undefined,
  associationBottom: undefined,
});
const unionData = ref<any[]>([]);
const associationData = ref<any[]>([]);

const convertLimit = (arg: number) => {
  if (!arg) {
    return undefined;
  }
  if (arg.toString().length >= 13) {
    const volume = arg / 1000000000000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "万亿元";
  } else if (arg.toString().length >= 9) {
    const volume = arg / 100000000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "亿元";
  } else if (arg.toString().length >= 5) {
    const volume = arg / 10000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "万元";
  } else {
    return arg + "元";
  }
};

const associationLimit = (arg: number) => {
  if (
    formState.value.associationTop &&
    arg >= formState.value.associationTop!
  ) {
    return convertLimit(formState.value.associationTop!);
  } else if (
    formState.value.associationBottom! &&
    arg <= formState.value.associationBottom!
  ) {
    return convertLimit(formState.value.associationBottom!);
  } else {
    return convertLimit(arg);
  }
};

const unionLimit = (arg: number) => {
  if (formState.value.unionTop && arg >= formState.value.unionTop!) {
    return convertLimit(formState.value.unionTop!);
  } else if (
    formState.value.unionBottom! &&
    arg <= formState.value.unionBottom!
  ) {
    return convertLimit(formState.value.unionBottom!);
  } else {
    return convertLimit(arg);
  }
};

const save = () => {
  if (!formState.value.schoolUnion) {
    message.warning("校工会预算预算不能为空");
    return;
  }
};
</script>

<style scoped lang="less">
.schoolUnionTable {
  padding: 10px;
  margin-top: 20px;
  width: 100%;
  border: 1px solid #e8e8e8;
}
.gutter-box {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.label {
  display: flex;
  align-items: center;
}
</style>
